---
id: 62a115879a6d51422652cbfc
title: Step 11
challengeType: 0
dashedName: step-11
---

# --description--

In your role playing game, users will be able to track their stats, buy weapons, and fight monsters. Before you can continue with the interactive JavaScript portion of the game, you need to first create the HTML elements that will display the game information.

在 `#game` 元素中創建四個 `div` 元素。 按順序爲它們提供以下相應的 `id` 值：`stats`、`controls`、`monsterStats` 和 `text`。

# --hints--

應該創建四個新的 `div` 元素。

```js
assert.equal(document.querySelectorAll('div')?.length, 5);
```

應該爲新的 `div` 元素之一提供 `id` 設爲 `stats`。

```js
assert.exists(document.querySelector('div#stats'));
```

應該爲新的 `div` 元素之一提供 `id` 設爲 `controls`。

```js
assert.exists(document.querySelector('div#controls'));
```

應該爲新的 `div` 元素之一提供 `id` 設爲 `monsterStats`。

```js
assert.exists(document.querySelector('div#monsterStats'));
```

應該爲新的 `div` 元素之一提供 `id` 設爲 `text`。

```js
assert.exists(document.querySelector('div#text'));
```

應該以正確的順序放置新的 `div` 元素。

```js
function __t(a, b) {
  return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b;
}
assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text'));
```

應該將新的 `div` 元素放在 `#game` 元素中。

```js
assert.equal(document.querySelector('#game')?.children?.length, 4);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
    <script src="./script.js"></script>
  </head>
--fcc-editable-region--
  <body>
    <div id="game">
    </div>
  </body>
--fcc-editable-region--
</html>
```

```js
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
```
